<template>
  <div class='container'  style='margin-top: 80px'>
    <div class='row'>
      <div class='col-md-8' style='border-right: 1px solid #000'>
        <h3>作业列表</h3>
        <table class='table' align='center' valign='center'>
          <thead>
            <tr>
              <th>科目</th>
              <th>作业</th>
              <th>开始时间</th>
              <th>结束时间</th>
            </tr>
          </thead>
          <tbody v-for="g in homeworkShow">
              <tr v-for="(h, k) in g.items">
                <td v-if="k == 0" :rowspan="g.long">{{ g.name }}</td>
                <td>{{ h.main }}</td>
                <td>{{ dateWrite(h.start) }}</td>
                <td>{{ dateWrite(h.end) }}</td>
              </tr>
          </tbody>
          <tbody v-if="homeworkShow.length == 0">
            <tr>
              <td colspan=4>
                挖地三尺也没有更多作业了
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class='col-md-4'>
        <div class='card'>
          <div class='card-body'>
            <h4>当前时间</h4>
            <Timecard />
          </div>
        </div>
        <br>
        <div class='card'>
          <div class='card-body'>
            <h4>选项</h4>
            <fieldset>
              <div class="custom-control custom-toggle d-block my-2">
                <input type="checkbox" id="customToggle2" name="customToggle2" class="custom-control-input" v-model='isShowOnlyActive'>
                <label class="custom-control-label" for="customToggle2">仅显示进行中作业</label>
              </div>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Timecard from './Timecard'
export default {
  name: 'Nav',
  data () {
    return {
      msg: '2333',
      isShowOnlyActive: 1,
      homeworks: [{
        subject: "语文",
        main: "认真看书",
        start: [7, 20],
        end: [7, 20]
      },
      {
        subject: "数学",
        main: "数学讲义第5页",
        start: [7, 20],
        end: [7, 20]
      },
      {
        subject: "英语",
        main: "背单词（资料发过）",
        start: [7, 20],
        end: [7, 20]
      },
      {
        subject: "物理",
        main: "预习新课（第1章和第2章）",
        start: [7, 20],
        end: [7, 20]
      },
      {
        subject: "化学",
        main: "预习新课",
        start: [7, 20],
        end: [7, 20]
      }],
      homeworkShow: []
    }
  },
  methods: {
    formatDate: function(dt, zl = 0) {
      let monthsDay = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      let b = dt[0]
      let a = dt[1]
      if (b > 0) {
        a = a + zl + monthsDay[b - 1]
        --b
      }
      else
        a += zl
      while (a > monthsDay[b]) {
        a = a - monthsDay[b]
        ++b
      }
      return [b, a]
    },
    dateWrite: function (dt) {
      return dt[0] + '-' + dt[1]
    },
    calcDate: function (q) {
      return q[0] * 32 + q[1]
    },
    makeHomeworks: function () {
      let hw = this.homeworks
      let finalTable = []
      let subjects = []
      let DateObject = new Date()
      let nowDate = [DateObject.getMonth() + 1, DateObject.getDate()]
      for (var i = 0; i < hw.length; ++i) {
        if (subjects.indexOf(hw[i].subject) == -1)
          subjects.push(hw[i].subject)
      }
      for (var i = 0; i < subjects.length; ++i) {
        let hwobject = {
          name: subjects[i],
          long: 0,
          items: []
        }
        for (var j = 0; j < hw.length; ++j) {
          if (hw[j].subject == subjects[i] && ((this.calcDate(hw[j].start) <= this.calcDate(nowDate) && this.calcDate(hw[j].end) >= this.calcDate(nowDate)) || this.isShowOnlyActive == 0)) {
            hwobject.items.push(hw[j])
            ++hwobject.long
          }
        }
        finalTable.push(hwobject)
      }
      return finalTable
    }
  },
  mounted () {
    let _this = this
    this.timer = setInterval(() => {
      _this.homeworkShow = _this.makeHomeworks()
    }, 500)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  components: {
    Timecard
  }
}
</script>
